<template>
  <div class="userDetail">
    <!-- 头像 -->
    <div class="avatarImage">
      <el-image
        style="width: 220px; height: 220px"
        :src="avatarUrl"
        fit="fill"
      ></el-image>
    </div>

    <!-- 个人信息详情 -->
    <div class="detail">
      <div class="nickname">{{ nickname }}</div>

      <div class="part1">
        <div class="tag">
          <span class="level">Lv{{ level }}</span>
          <span>
            <i class="el-icon-male" v-if="gender == 1"></i>
            <i class="el-icon-female" v-if="gender == 2"></i>
          </span>
        </div>

        <div class="button">
          <el-button round v-remove-focus v-if="isMyself">
            <i class="el-icon-edit"></i> 编辑个人信息
          </el-button>
          <el-button
            round
            v-remove-focus
            v-show="artistId != undefined"
            @click="toSongerDetailPage(artistId)"
          >
            <i class="el-icon-mic"></i> 歌手页
          </el-button>
          <el-button round v-remove-focus v-if="!isMyself">
            <i class="el-icon-message"></i> 发私信
          </el-button>
          <el-button round v-remove-focus v-if="!isMyself && !followed">
            <i class="el-icon-plus"></i> 关注
          </el-button>
          <el-button round v-remove-focus v-if="!isMyself && mutual">
            <i class="el-icon-sort"></i> 相互关注
          </el-button>
          <el-button round v-remove-focus v-show="!isMyself && followed" v-else>
            <i class="el-icon-check"></i> 已关注
          </el-button>
        </div>
      </div>

      <div class="part2">
        <div class="eventCount">
          <div class="count">{{ eventCount }}</div>
          <div class="text">动态</div>
        </div>

        <div class="follows" @click="toFollowsPage">
          <div class="count">{{ follows }}</div>
          <div class="text">关注</div>
        </div>

        <div class="followeds" @click="toFollowedsPage">
          <div class="count">{{ followeds }}</div>
          <div class="text">粉丝</div>
        </div>
      </div>

      <div class="address">
        <div class="label">所在地区：暂无</div>
      </div>
      <div class="socialNetwork">
        <div class="label">社交网络：暂无</div>
      </div>
      <div class="signature">
        <div class="label">个人介绍：{{ signature }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'userDetail',
  data() {
    return {
      // 用户等级
      level: '',
      // 相互关注
      mutual: '',
      // 用户性别
      gender: '',
      // 用户关注
      follows: '',
      // 歌手 id，如果是歌手的话
      artistId: '',
      // 用户昵称
      nickname: '',
      // 是否关注了
      followed: '',
      // 用户粉丝
      followeds: '',
      // 个人介绍
      signature: '',
      // 用户头像
      avatarUrl: '',
      // 用户动态数量
      eventCount: '',
    }
  },
  computed: {
    ...mapState(['isMyself', 'theDetailUserId']),
  },
  created() {
    this.getUserDetailInfo()
  },
  watch: {
    theDetailUserId: function (newVal, oldVal) {
      this.getUserDetailInfo()
    },
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeSongerId',
      'changeTheFollowsUserId',
      'changeTheFollowedsUserId',
    ]),

    //   获取用户详情
    async getUserDetailInfo() {
      const { data: res } = await this.$http({
        url: `/user/detail?uid=${this.theDetailUserId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.getUserDetailAboutInfo(res)
    },
    // 提取关注页面相关信息
    getUserDetailAboutInfo(obj) {
      /**
       * 用户等级 level
       * 相互关注 mutual
       * 用户性别 gender  1为男生 2为女生 0为私密
       * 用户关注 follows
       * 歌手id artistId 如果用户是歌手的话
       * 用户昵称 nickname
       * 是否关注了 followed
       * 用户粉丝 followeds
       * 个人介绍 signature
       * 用户头像 avatarUrl
       * 用户动态数量 eventCount
       */
      this.level = obj.level
      this.mutual = obj.profile.mutual
      this.gender = obj.profile.gender
      this.follows = obj.profile.follows
      this.artistId = obj.profile.artistId
      this.nickname = obj.profile.nickname
      this.followed = obj.profile.followed
      this.followeds = obj.profile.followeds
      this.signature = obj.profile.signature
      this.avatarUrl = obj.profile.avatarUrl
      this.eventCount = obj.profile.eventCount
    },

    // 传递用户数据，并跳转到关注页面
    toFollowsPage() {
      const info = {
        path: '/view/follows',
        theFollowsUserId: this.theDetailUserId,
      }

      this.changePath(info.path)
      this.changeTheFollowsUserId(info.theFollowsUserId)

      this.$emit('getFollowsPageInfo')
    },
    // 传递用户数据，并跳转到粉丝页面
    toFollowedsPage() {
      const info = {
        path: '/view/followeds',
        theFollowedsUserId: this.theDetailUserId,
      }

      this.changePath(info.path)
      this.changeTheFollowedsUserId(info.theFollowedsUserId)

      this.$emit('getFollowedsPageInfo')
    },
    // 跳转到歌手详情页面
    toSongerDetailPage(songerId) {
      const info = {
        path: '/view/songerdetail',
        songerId: songerId,
      }

      this.changePath(info.path)
      this.changeSongerId(info.songerId)

      this.$emit('getSongerDetailInfo')
    },
  },
}
</script>

<style lang="less" scoped>
.userDetail {
  display: flex;
}

.avatarImage {
  padding: 36px;
  > .el-image {
    border-radius: 50%;
  }
}

.detail {
  width: 660px;
}

.nickname {
  font-size: 22px;
  font-weight: 900;
  padding-top: 36px;
}

.part1 {
  margin-top: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;

  > .tag {
    width: 240px;
    span {
      margin-right: 8px;
      margin-bottom: 2px;
    }

    > .level {
      background-color: #f0f0f0;
      padding: 1px 4px;
      border-radius: 24px;
      font-size: 14px;
    }

    .el-icon-question {
      background-color: #c0f3ff;
      border-radius: 50%;
      padding: 2px;
      color: #3da1d1;
    }
    .el-icon-male {
      background-color: #c0f3ff;
      border-radius: 50%;
      padding: 2px;
      color: #3da1d1;
    }
    .el-icon-female {
      background-color: #ffcde8;
      border-radius: 50%;
      padding: 2px;
      color: #ed6da3;
    }
  }

  > .button {
    .el-button {
      padding: 8px 14px;
    }
    .el-icon-plus {
      color: #ec4141;
    }
    /deep/ .el-button:hover {
      background-color: #f2f2f2;
      color: black;
      border: 1px solid #e5e5e5;
    }
    /deep/ .el-button:focus {
      background-color: white;
      color: black;
      border: 1px solid #e5e5e5;
    }

    .el-icon-sort {
      transform: rotate(90deg);
    }
  }
}

.part2 {
  display: flex;
  > div {
    .count {
      font-size: 18px;
    }
    .text {
      margin-top: 2px;
      color: #676767;
      font-size: 14px;
    }
  }
  > .eventCount {
    padding-right: 36px;
    > .count {
      position: relative;
      left: 7px;
    }
  }
  > .follows {
    width: 82px;
    text-align: center;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
  }
  .followeds {
    padding-left: 36px;
    > .count {
      position: relative;
      left: 7px;
    }
  }
}

.address {
  margin-top: 8px;
  font-size: 14px;
  color: #676767;
  > .label {
    color: #373737;
  }
}
.socialNetwork {
  margin-top: 8px;
  font-size: 14px;
  color: #676767;
  > .label {
    color: #373737;
  }
}
.signature {
  margin-top: 8px;
  font-size: 14px;
  color: #676767;
  > .label {
    color: #373737;
  }
}
</style>